<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>调色板</title>
		<style>
			.Toolbar
			{
				width: 250px;
				float: left;
				font-family: "微软雅黑";
				font-size: 14px;
				text-align: center;
				background-color: #f2f7fe;
				border: 1px solid #7b899b;
				padding: 10px 15px 3px 10px;
				margin-top: 1px;
				margin-bottom: 1px;
			}
			img
			{
				padding: 5px;
				border: 1px solid #e4f0fe;
			}
			img:hover{
				border: 1px solid #e4f0fe;
				background: white;
			}
			
			.containerCanvas{
				clear: both;
			}
			
			button
			{
				padding: 6px;
				margin: 2px 2px ;
				font-size: 14px;
				background: #E4F0FE;
			}
			#eraser_size{
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="Toolbar">
			-color-<br />
			<img id="pen_black" src="img/pen_black.gif" />
			<img id="pen_red" src="img/pen_red.gif" />
			<img id="pen_green" src="img/pen_green.gif" />
			<img id="pen_blue" src="img/pen_blue.gif" />
		</div>
		
		<div class="Toolbar">
			-size-<br />
			<img id="pen_thin" src="img/pen_thin.gif" />
			<img id="pen_medium" src="img/pen_medium.gif" />
			<img id="pen_thick" src="img/pen_thick.gif" />
		</div>
		
		<div class="Toolbar">
			-eraser-<br />
			<img id="eraser_thin" src="img/eraser_thin.gif" />
			<img id="eraser_medium" src="img/eraser_medium.gif" />
			<img id="eraser_thick" src="img/eraser_thick.gif" />
		</div>
		
		<div class="Toolbar">
			-status-<br />
			<img id="pen_color" src="img/pen_black.gif" />
			<img id="pen_size" src="img/pen_thin.gif" />
			<img id="eraser_size" src="img/eraser_thin.gif" />
		</div>
		
		<div class="containerCanvas">
			<canvas id="canvas" width="1100" height="500" style="border: 1px solid #cccccc;"></canvas>
		</div>
		
		<button id="clear">clear</button>
		<button id="save">save</button>
		
		
		<script>
			window.onload = function(){
				var canvas = document.getElementById("canvas");
				var cxt = canvas.getContext("2d");
				
				var canvasx = canvas.getBoundingClientRect().left;
				var canvasy = canvas.getBoundingClientRect().top;

				canvas.addEventListener("mousedown",downfun);
				canvas.addEventListener("mousemove",movefun);
				canvas.addEventListener("mouseup",upfun);
				
				var startx;
				var starty;
				var endx;
				var endy;
				cxt.lineWidth=3;
				var offon=false;
				function downfun(e){
					offon=true;
					startx=e.clientX-canvasx;
					starty=e.clientY-canvasy;
				}
				function movefun(e){
					if(offon==true){
					cxt.beginPath()
					endx=e.clientX-canvasx;
					endy=e.clientY-canvasy;
					cxt.moveTo(startx,starty);
					cxt.lineTo(endx,endy);
					cxt.stroke();
					
					startx=endx;
					starty=endy;
					
					
					}
				}
				function upfun(){
					offon=false;
					cxt.closePath();
				}
				document.getElementById("clear").onclick=function(){
					cxt.clearRect(0,0,canvas.width,canvas.height);
				}
//				document.getElementById("save").onclick=function(){
//					var url=canvas.toDataURL();
//					var a=document.createElement("a");
//					document.body.appendChild(a);
//					a.href=url;
//					a.document="画板作品";
//					a.click();
//					
//				}
				document.getElementById("save").onclick=function(){
					var url=canvas.toDataURL();
					
					var iframe="<iframe width='100%' height='100%' src='"+url+"'></iframe>"
					var x=window.open();
					x.document.open();
					x.document.write(iframe);
					x.document.close();
				}
				//画笔颜色
				document.getElementById("pen_black").onclick=function(){
					cxt.strokeStyle="black";
					document.getElementById("pen_color").src="img/pen_black.gif";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("eraser_size").style.display="none";
				}
				document.getElementById("pen_red").onclick=function(){
					cxt.strokeStyle="red";
					document.getElementById("pen_color").src="img/pen_red.gif";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("eraser_size").style.display="none";
				}
				document.getElementById("pen_green").onclick=function(){
					cxt.strokeStyle="green";
					document.getElementById("pen_color").src="img/pen_green.gif";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("eraser_size").style.display="none";
				}
				document.getElementById("pen_blue").onclick=function(){
					cxt.strokeStyle="blue";
					document.getElementById("pen_color").src="img/pen_blue.gif";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("eraser_size").style.display="none";
				}
				//画笔大小
				document.getElementById("pen_thin").onclick=function(){
					cxt.lineWidth=3;
					document.getElementById("pen_color").src="img/pen_thin.gif";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("eraser_size").style.display="none";
				}
				document.getElementById("pen_medium").onclick=function(){
					cxt.lineWidth=6;
					document.getElementById("pen_color").src="img/pen_medium.gif";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("eraser_size").style.display="none";
				}
				document.getElementById("pen_thick").onclick=function(){
					cxt.lineWidth=10;
					document.getElementById("pen_color").src="img/pen_thick.gif";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("eraser_size").style.display="none";
				}
				//橡皮擦大小
				document.getElementById("eraser_thin").onclick=function(){
					cxt.strokeStyle="white";
					cxt.lineWidth=3;
					document.getElementById("pen_color").src="img/eraser_thin.gif";
					document.getElementById("pen_color").style.display="none";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("eraser_size").style.display="inline";
				}
				document.getElementById("eraser_medium").onclick=function(){
					cxt.strokeStyle="white";
					cxt.lineWidth=6;
					document.getElementById("pen_color").src="img/eraser_medium.gif";
					document.getElementById("pen_color").style.display="none";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("eraser_size").style.display="inline";
				}
				document.getElementById("eraser_thick").onclick=function(){
					cxt.strokeStyle="white";
					cxt.lineWidth=10;
					document.getElementById("pen_color").src="img/eraser_thick.gif";
					document.getElementById("pen_color").style.display="none";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("eraser_size").style.display="inline";
				}
			}
		</script>
	</body>
</html>
